/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

@import "variables.less";

* {
  margin: 0;
  padding: 0;
  font-family: "Arial";
}

html,
#window {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#windowContainer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.top {
  -moz-window-dragging: drag;
  padding-top: 6px;
  background: @chromePrimary;

  .backforward {
    position: absolute;
    z-index: 10;
    top: -12px;
    left: 80px;
    width: 66px;
    vertical-align: center;

    span {
      position: absolute;
      color: #3B3B3B;
      font-weight: 300;
      opacity: 0.3;

      &:not([disabled]) {
        opacity: 0.6;
      }

      &:not([disabled]):hover {
        color: #3B3B3B;
        opacity: 1.0;
      }
    }

    .back {
      top: 14px;
      font-size: 35px;
    }

    .forward {
      top: 14px;
      right: 10px;
      font-size: 35px;
    }

  }

}

.mainContainer {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 100%;

  .tabContainer {
    flex-grow: 1;
    position: relative;
  }
  >div.tabs {
    width: 180px;
    overflow-y: scroll;
  }
}

.frameWrapper {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;

  // Needed to be able to click and drag to select content in pages.
  -webkit-user-select: none;

  webview {
    background-color: #fff;
    border: 0;
    height: 100%;
    width: 100%;
  }

  .webviewContainer {
    height: 100%;
    width: 100%;
    &.isPreview {
      opacity: 0.5;
    }
  }

  &:not(.isActive) {
    z-index: 1;
    &.isPreview {
      background: gray;
      z-index: 3;
    }
  }
}

body.fullScreen .frameWrapper.isActive {
  z-index: 10000;
}

/* The fullscreen notice is shown above the fullscreen element */
body.fullScreen .banner {
  position: absolute;
  z-index: 10001;
  top: 0;
  opacity: 1;
  transition: opacity 2s ease-in-out;
}

body.fullScreen .banner.fade {
  opacity: 0;
}

[draggable] {
  -webkit-user-select: none;
 }

.link {
  color: @linkColor;
  cursor: pointer;
  text-decoration: underline;
}

// In React we often want to have elements but without href, so force pointer cursor
a {
  cursor: pointer;
}

.topLevelEndButtons {
  position: absolute;
  top: 5px;
  right: 0;
}
